<template>
    <div class="user-credit-report">
        <template v-if='userInfoFinish'>
            <div class="wrapper">
                <div class="report-header">
                    <p class='title'>为什么要信用报告？</p>
                    <ul class="report-intro">
                        <li class="report-intro__item">
                            <span class="report-intro__img"><img src="../images/reportIntro1.png"> </span>
                            <p class="report-intro__text">信用报告是全面、客观记录您的信用活动，反映您的信用状况的文件。 </p>
                        </li>
                        <li class="report-intro__item">
                            <span class="report-intro__img"><img src="../images/reportIntro2.png"> </span>
                            <p class="report-intro__text">
                                通过信用报告，双方能快速了解对方的信用情况，决定是否提供借款/出借。 
                                <span>信用报告越完善，记录越好，越有利于借款/出借。</span>
                            </p>
                        </li>
                        <li class="report-intro__item no-border">
                            <span class="report-intro__img"><img src="../images/reportIntro3.png"> </span>
                            <p class="report-intro__text">有借的信用认证包含个人的基本信息、芝麻信用、运营商记录、京东记录。 </p>
                        </li>
                    </ul>
                </div>

                <div class="form__agreement">
                    <check-box v-model='agreementCheck'><span class='form__agreement-text'>已阅读并同意 <em @click.stop='showAgreement = true'>《有借服务条款》</em> </span></check-box>
                </div>

                <p class="auth-button" @click='goCredit' v-if='userInfo.user.bizRole == "B"'>
                    <span class="button long" :class='{disabled : !agreementCheck}'><del>{{newest.item.price | toYuan}}元</del>，立即免费认证</span>
                </p>
                <p class="auth-button" @click='confirm' v-else>
                    <span class="button long" :class='{disabled : !agreementCheck}'>支付{{newest.item.price | toYuan}}元，立即认证</span>
                </p>

                <p class="explain" v-if='newest.item'>7天内可重复认证, 信用报告有效期{{newest.item.effectiveDay}}天</p>
            </div>
        </template>

        <pay-detail
            v-if='newest.item'
            :amount='newest.item.price'
            type='credit-report'
            :show='showPayDetail'
            @close='showPayDetail=false'
            @finish='payDetailFinish'></pay-detail>

        <pay-password
            :show='showPayPassword'
            @close='showPayPassword=false'
            @finish='payFinish'></pay-password>

        <sms-code
            v-if='userInfo'
            type='CREDIT_REPORT'
            :show='showSmsCode'
            :mobile='userInfo.user.mobile'
            @close='showSmsCode=false'
            @finish='smsFinish'></sms-code>

        <agreement
            type='report'
            :show='showAgreement'
            @close='showAgreement=false'></agreement>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import payPassword from '../components/PayPassword.vue'
    import payDetail from '../components/PayDetail.vue'
    import smsCode from '../components/SmsCode.vue'
    import checkBox from '../components/CheckBox.vue'
    import agreement from '../components/Agreement.vue'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { getQueryString } from '../utils/utils'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { reportApi, userApi, payApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            payPassword,
            payDetail,
            smsCode,
            agreement,
            checkBox
        },
        filters:{
            toYuan
        },
        data() {
            return {
                userInfoFinish:false,
                passwordPass:false,
                password:'',
                payWay:'',
                showAgreement:false,
                showPayPassword:false,
                showPayDetail:this.$route.query.showpaydetail == 'yes',
                showSmsCode:false,
                smsCode:'',
                agreementCheck:true,
                newest:{},
                cardNo:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo'
            ]),

            // function
            confirm(){
                this.showPayDetail = true
            },
            payDetailFinish(payObject){
                if(payObject.payType == 0){
                    this.payWay = 'CHARGE'
                    this.cardNo = payObject.cardNo
                }
                else{
                    this.payWay = 'BALANCE'
                }
                this.showPayDetail = false

                if(this.payWay = 'CHARGE') {
                    this.getReportId()
                }
                else {
                    this.showPayPassword = true
                }
            },
            payFinish(password){
                this.password = password
                this.passwordPass = true
                this.showPayPassword = false
                if(this.payWay == 'BALANCE'){
                    this.showSmsCode = true
                }
                else{
                    this.getReportId()
                }
            },
            smsFinish(smsCode){
                this.smsCode = smsCode
                this.showSmsCode = false
                this.getReportId()
            },
            pay(){
                payApi.pay({
                    payId:this.payId,
                    cardNo:this.cardNo,
                    returnUrl:location.href
                })
                .then(result=> {
                    location.href = result.payParam.url
                })
                .catch(error=> {
                    console.log(error);
                    this.hideLoading()
                })
            },
            getReportId(){
                this.showLoading()
                reportApi.create({
                    payWay:this.payWay,
                    tradePassword:this.password,
                    smsCode:this.smsCode,
                })
                .then(result=>{
                    if(!result.charge){
                        this.setMsgTip({
                            text:'支付成功！',
                            type:'success'
                        })
                        this.setUserInfo()
                        this.getNewest('success')
                        return
                    }
                    this.payId = result.charge.payId
                    this.pay()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goCredit(){
                this.showLoading()
                reportApi.create()
                .then(result=>{
                    this.setUserInfo()
                    this.getNewest('success')
                    return
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goUserCreditReportUserInfo(){

            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getNewest(success){
                this.showLoading()
                reportApi.newest()
                .then(result=>{
                    if(success == 'success'){
                        this.hideLoading()
                        this.$router.replace({
                            name:'user-credit-report-user-info',
                            params:{
                                no:result.creditReportNo
                            }
                        })
                        return
                    }
                    if(this.userInfo.isExpired){
                        this.hideLoading()
                        this.userInfoFinish = true
                        this.newest = result
                        return
                    }

                    if(this.$route.query.type == 'pass'){
                        this.userInfoFinish = true
                        this.newest = result
                        this.hideLoading()
                        return
                    }

                    if(result.payState == 'SUCCESS'){
                        this.hideLoading()
                        this.$router.replace({
                            name:'user-credit-report-list'
                        })
                        return
                    }
                    this.userInfoFinish = true
                    this.newest = result
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
        },
        created(){

            if(this.userInfo.user.validState != 'OK'){
                this.setMsgTip({
                    text:'请先完成实名认证',
                    type:'warn'
                })
                this.$router.replace({
                    name:'user-bind-card-verified'
                })
                return
            }

            let status = this.$route.query.status
            if(status == 'fail'){
                this.setMsgTip({
                    text:'支付失败！',
                    type:'error'
                })
                return
            }
            if(status == 'success'){
                this.setMsgTip({
                    text:'支付成功！',
                    type:'success'
                })
                this.getNewest('success')
                return
            }
            this.getNewest()

            
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-credit-report{
        .report-header{
            background-color: #fff;
            padding:24px 24px 0 24px;
            .title{
                @extend %font-title;
                color:$importColor;
                text-align: center;
            }
        }
        .agreement{
            padding: 17px;
            color:$importColor;
        }
        .auth-button{
            padding: 13px 24px 0 24px;
        }
        .explain{
            padding: 22px 0;
            text-align: center;
            color:$importColor;
            span{
                color:$orange;
            }
        }
        .report-intro{
            padding-top: 16px;
        }
        .report-intro__item{
            display: flex;
            padding-bottom: 16px;
            &.no-border{
                .report-intro__text{
                    border-bottom:none
                }
            }

        }
        .report-intro__img{
            display: block;
            width: 80px;
            height: 80px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .report-intro__text{
            flex:1;
            margin-left: 16px;
            @extend %font-body1;
            color:$importColor;
            padding-bottom: 27px;
            border-bottom:1px solid $sectionColor;
            span{
                display: block;
                padding-top: 8px;
                @extend %font-caption;
                color:$defaultColor;
            }
        }
    }

</style>
